<template>
	<el-aside :width="isExpand ? '240px' : '0'" class="sw_agent_aside">
		<div class="agent_aside_header">
			<i class="icon">{{ siteData.icon }}</i>
			<h2>{{ siteData.title }}</h2>
			<el-button type="text" icon="el-icon-s-fold" @click="handleChatAside"></el-button>
		</div>
		<el-button size="medium" class="added" icon="el-icon-edit-outline" @click="handleAddedChat">开启新对话</el-button>
		<el-scrollbar class="agent_aside_content">
			<div v-for="(item, index) in workflows" :key="index" :class="['item', { active: !checkedItem || item.id === checkedItem }]">
				{{ item.created_by_end_user.session_id }}
			</div>
		</el-scrollbar>
		<div class="agent_aside_bottom">
			<el-dropdown size="medium" @command="handleCommandSetting">
				<el-button type="text" class="setting" icon="el-icon-s-operation"></el-button>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="about">关于</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<h4>Powered by</h4>
			<img src="~@/assets/logo.png" />
		</div>
	</el-aside>
</template>

<script>
import { mapGetters } from 'vuex';
import handleMixins from '@/mixins/handle';
import { getWorkflowLog } from '@/api/common';
export default {
	mixins: [handleMixins],
	data() {
		return {};
	},
	computed: { ...mapGetters(['siteData']) },
	mounted() {
		this.getWorkflowList();
	},
	methods: {
		//获取会话列表
		async getWorkflowList() {
			let params = { limit: 100 };
			let result = await getWorkflowLog(params);
			if (result.status === 200) {
				this.workflows = result.data.data || [];
			}
		},

		handleCommandSetting(command) {
			if (command === 'about') {
				this.$confirm(this.siteData.title, this.siteData.icon, {
					customClass: 'agent_about_message',
					dangerouslyUseHTMLString: true,
					showConfirmButton: false,
					showCancelButton: false,
					center: true
				}).catch(() => {});
			}
		}
	}
};
</script>
